class odiv{
				constructor(){
					this.btn = document.querySelectorAll('.box input');
					this.li = document.querySelectorAll('ul li')
					var left = document.getElementById("left")
					var right = document.getElementById("right")
					this.index = 0;
				}
				show(){
					var _this = this;
					for(let i=0;i<this.btn.length;i++){
						this.btn[i].onclick = function(){
							_this.fn(i);
						}
					}
					right.onclick = function(){
						_this.index++
	                 	if(_this.index ==3){
	                 		_this.index = 0;
	                 	}
	                 	_this.fn(_this.index)	         
					}
					left.onclick = function(){
						_this.index--
	                 	if(_this.index ==-1){
	                 		_this.index = 2;
	                 	}
	                 	_this.fn(_this.index)	         
					}
				}
				fn(i){
					for(var j=0;j<this.li.length;j++){
						this.btn[j].className = '';
						this.li[j].className = '';
					}
					this.li[i].className = 'show';
					this.btn[i].className = "active";
				}
}
			window.onload = function(){
				var n = new odiv();
				n.show();
			}
//              class div3 extends odiv{
//              	constructor(str){
//              		super(str);
//              		this.autofn();
//              		this.index = 0;
//              	}
//              	autofn(){
//              		var _this = this;
////              		setInterval(function(){
//	                 left.onclick = function(){
//	                 	_this.index++
//	                 	if(_this.index ==-1){
//	                 		_this.index = 2;
//	                 	}
//	                 	_this.fn(_this.index)	                 	
//	                 }
////              		},1500)
//              	}
//              }			